<template>
 <div style="display: flex;width: 100%;">
   <!-- 左部导航栏 -->
   <div class="NavMenu">
    <li v-for="item in classifyList" :key="item.classifyId">
      {{item.classifyName}}
    </li>
   </div>
   <!-- 右部元素栏 -->
   <div class="goods_list">
     <div class="goods_box" v-for="claitem in classifyList" :key="claitem.classifyId">
       <div class="goodsItem" v-for="item in AllGoodsAndClassifyList" :key="item.goodsId"
       v-if="item.classify.classifyId==claitem.classifyId" @click="showGoodsDetails(item)">
         <a href="#" style="color: #000000;">
           <div>
             <img :src="item.goodsImg"  width="100%" height="100%">
           </div>
           <div style="flex:1;display: flex;flex-direction: column;justify-content: space-between;
           padding: 7px 0;box-sizing: border-box;">
             <li><span>火热</span>{{item.goodsName}}</li>
             <p><span>￥</span>{{item.price}}.00</p>
           </div>
         </a>
       </div>
       <!-- 空数据页面 -->
       <el-empty description="暂无数据" v-if="false"></el-empty>
     </div>
   </div>
</div>
</template>

<script>
  export default {
  	name: "ClassifyMenu",
  	components: {
  	},
  	data() {
  		return {
        //前台分类页获取所有商品分类信息
        AllGoodsAndClassifyList:{},
        //所有分类信息
        classifyList:{},
  		}
  	},
    mounted(){
      this.getAllClassAndGoodsInfo()
      this.NavChilds()
    },
    methods: {
      // 获取所有分类商品方法
      getAllClassAndGoodsInfo(){
        var self = this;
        self.$http.post("/api/CakeShop/GoodsManage/getAllClassAndGoodsInfo", {
        }).then(function(res) {
          // console.log(res)
          self.AllGoodsAndClassifyList = res.data.AllGoodsAndClassifyList
          self.classifyList = res.data.classifyList
        }).catch(function(error) {
          // console.log(error)
        })
      },
      //
      NavChilds(){
        var claList = document.getElementsByClassName("NavMenu")[0].children
        var goodsList = document.getElementsByClassName("goods_list")[0].children
        //设置延迟加载防止异步请求数据时查询数组长度为0
        setTimeout(() => {
          for(var i=0;i<claList.length;i++){
            claList[i].index = i;//记录索引值
            claList[i].onclick = function(){
              for(var j = 0;j < claList.length;j++){
                claList[j].className = "";
                goodsList[j].style.display = 'none';
              }
              this.className = "currentClassify";
              goodsList[this.index].style.display = "flex";
            };
          }
          //默认加载第一个分类及其页面
          claList[0].className = "currentClassify";
          goodsList[0].style.display= "flex";
        },400)
      },
      //准备跳转
      showGoodsDetails(item){
        // console.log(item)
        sessionStorage.setItem("lastPage",'/home/classify')
        this.$router.push({
          path:"/goodsItemDetails",
          name:"GoodsDetails",
          params:{
            goodsItemDetails:item
          }
        })
      }
    },
  }
</script>

<style scoped>
  /* 左部导航栏 */
  .NavMenu{
    display: flex;
    flex-direction: column;
    width: 118px;
    overflow: auto;
    background-color: #eaeaea;
  }
    /* 当前被选中样式 */
  .currentClassify{
    background-color: #fff;
  }
  .NavMenu li{
    display: flex;
    list-style: none;
    width: 100%;
    height: 45px;
    align-items: center;
    justify-content: center;
  }
  /* 右部元素栏 */
  .goods_list{
    flex: 1;
    display: flex;
    padding: 10px 18px;
    box-sizing: border-box;
  }
  .goods_list .goods_box{
    flex: 1;
    display: none;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    flex-flow:row wrap;
    /* 问题原因：当元素不只一行意味着flex容器在交叉轴上有多行，此时align-content属性生效，
    align-content默认属性为stretch导致flex容器将交叉轴上的多余空间按行数平均分给每行。
    处理此问题解决方法也很简单，直接给父元素设置align-content: flex-start即可。*/
    align-content: flex-start
  }
  /* 空数据页面样式 */
  .goods_list .goods_box .el-empty{
    width: 100%;
    height: 100%;
  }
  .goods_list .goods_box .goodsItem{
    display: flex;
    flex-direction: column;
    text-align: left;
    width: 48%;
    height: 180px;
    /* 阴影边框效果 */
    box-shadow: 0 0 3px 3px #e6e6e6;
    padding: 7px;
    box-sizing: border-box;
    margin: 8px 0;
  }
  .goods_list .goods_box .goodsItem li{
    list-style: none;
    font-size: 14px;
  }
  .goods_list .goods_box .goodsItem li span{
    background-color: red;
    font-size: 2px;
    color: #fff;
    margin-right: 5px;
  }
  .goods_list .goods_box .goodsItem p{
    color: red;
  }
  .goods_list .goods_box .goodsItem p span{
    color: #000000;
    font-size: 1px;
  }
</style>
